<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<search-input v-model='username' placeholder="请输入用户名"></search-input>
			
			<check-input v-model="logvalue"></check-input>
			
			<nav-div v-bind:meg="megdiv">试试插槽，如果这里没有内容，则显示组件中的备用插槽</nav-div>
			
			<container-div>
				<template v-slot:header>
					<h1>试试具名插槽的厉害</h1>
				</template>
				
				<template v-slot:main>
					<p>这是具名插槽中的内容部分</p>
					<p>这是具名插槽中的内容部分</p>
				</template>
				
				<template v-slot:footer>
					<div>
						<span>这是具名插槽的底部</span>
					</div>
				</template>
				
			</container-div>
		</div>
		
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		/*import componentA from './componentA'
		
		export default {
			components:{
				componentA
			}
		}*/
		
		//inheritAttrs:false与$attrs，禁用继承
		Vue.component('search-input',{
			inheritAttrs:false,
			props:['label','value'],
			template:'<label>{{label}}<input v-bind="$attrs" :value="value" @input="$emit(\'input\',$event.target.value)"></label>'
		})
		
		
		//单选框或复选框的组件,使用model完成
		Vue.component('check-input',{
			model:{
				prop:'checked',
				event:'change'
			},
			props:{checked:Boolean},
			template:`
			<input
			 type="checkbox"
			 :checked="checked"
			 @change="$emit('change',$event.target.checked)"
			>
			`
		})
		
		
		Vue.component('nav-div',{
			props:['meg'],
			template:'<div>{{meg}}<slot>这是后备内容，当没有设置插槽内容时就显示这个</slot></div>'
		})
		
		
		//具名插槽
		Vue.component('container-div',{
			template:`
			<div>
				<header>
					<slot name="header"></slot>
				</header>
				<main>
					<slot name="main"></slot>
				</main>
				<footer>
					<slot name="footer"></slot>
				</footer>
			</div>
			`
		})
		
		
		
		var vm= new Vue({
			el:'#app',
			data:{
				username:'12',
				logvalue:'',
				megdiv:'koilkhjklj'
			},
			components:{
				
			}
		})
		
		
	</script>
</html>
